<template>
  <div class="app-container">

    <div class="filter-container">

      <QueryPointLog @queryRecords="getRecords" @reloadRecords="reload" :selectId="selectId" >
      </QueryPointLog>

    </div>

    <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row
              @selection-change="handleSelectionChange"
              v-horizontal-scroll="'always'">
      <el-table-column type="selection" width="55"/>
      <!-- <el-table-column type="index" label="序列" width="50" /> -->
      <el-table-column fixed="left" prop="id" label="ID" min-width="50"/>
<!--      <el-table-column prop="avatar" label="头像" min-width="80">
        <template slot-scope="scope">
          <img v-if="scope.row.avatar" class="table-img" :src="host+scope.row.avatar">
        </template>
      </el-table-column>-->
      <el-table-column prop="name" label="姓名" min-width="100"/>
      <el-table-column prop="passport" label="护照号" min-width="100"/>
      <el-table-column prop="phone" label="手机" min-width="100"/>
      <el-table-column prop="action_name" label="操作" min-width="60"/>
      <el-table-column prop="point" label="积分" min-width="60"/>
      <el-table-column prop="reason" label="原因" min-width="350"/>
      <el-table-column prop="created_at" label="创建时间" min-width="150"/>
      <!--<el-table-column fixed="right" label="操作" min-width="100">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="text" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>-->
    </el-table>


    <MyPagination @changeSize="handleSizeChange" @changePage="handlePageChange" :pagination="pagination"></MyPagination>


  </div>
</template>

<script>

import QueryPointLog from "./QueryPointLog";
import {myGet, myPost} from '@/utils/myUtils'

const urlLst = '/guard/user/pointlog';
export default {
  components:{
    QueryPointLog
  },
  data() {
    return {
      host: process.env.VUE_APP_HOST,
      record: {},
      addDialogFormVisible: false,
      selectId: [],
      list: [],
      listLoading: true,
      pagination: {
        total: 0,
        page: 1,
        pageSize: 50,
      },
    }
  },
  methods: {

    changeStatus(row) {
      myPost(urlChange, {id: row.id, status: row.status}).then(res => {
        if (res.status) {
          this.$message.success(res.msg)
        }
      })
    },

    handleEdit(index, row) {
      this.record = row
      this.addDialogFormVisible = true
    },

    addShow(){
      this.record = {}
      this.addDialogFormVisible = true
    },
    addCancel(val){
      this.addDialogFormVisible = val
    },

    addSuccess(val){
      this.addDialogFormVisible = val
      this.reload()
    },

    reload() {
      Object.assign(this.$data.pagination, this.$options.data().pagination)
      this.getRecords()
    },

    handleSelectionChange(val) {
      this.selectId = [];
      val.forEach(item => {
        this.selectId.push(item.id)
      })
    },

    getRecords(query={}) {
      this.listLoading = true;
      let params = Object.assign(query, this.pagination)
      myGet(urlLst, params).then((res) => {
        this.listLoading = false;
        if (res.status) {
          this.list = res.data.records
          this.pagination.total = res.data.total
        }
      })
    },
    handleSizeChange(val) {
      this.pagination.pageSize = val
      this.pagination.page = 1
      this.getRecords()
    },
    handlePageChange(val) {
      this.pagination.page = val
      this.getRecords();
    }
  },
  mounted() {
    this.getRecords()
  }
}
</script>

<style>

.table-img {
  width: 50px;
  height: 50px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}

.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
</style>


